<template>
	<view>
		<view class="list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex align-center" @click="onDetail(item)">
					<view class="file">
						<image :src="item.image" />
					</view>

					<view class="right flex column just-between">
						<view class="one flex align-base just-between">
							<view class="title fb-30 limit-num-line">
								{{ item.name }}
							</view>

							<view class="num f-24">
								{{ item.total_sales }}人已体验
							</view>
						</view>

						<view class="sign-bg flex" scroll-x>
							<block
								v-for="(sign, idx) in item.subtitle.split('|')"
								:key="idx"
							>
								<view class="sign f-26">{{ sign }}</view>
							</block>
						</view>

						<view class="bottom flex align-end">
							<view class="time f-20">
								{{ item.duration_time }}分钟
							</view>

							<view class="price flex align-base">
								<text class="f-26">¥</text>
								<text class="f-40">{{ item.price }}</text>
							</view>

							<view class="old-price f-26">
								￥{{ item.original_price }}
							</view>
						</view>

						<view class="btn f-26"> 查看详情 </view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: [],
			},
		},
		methods: {
			/**
			 * 详情
			 */
			onDetail(item) {
				uni.navigateTo({
					url: `/subPages/technician/home/serviceDetail?id=${item.id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			background: white;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 0rpx;
			}

			.file {
				width: 176rpx;
				height: 176rpx;
				border-radius: 10rpx;
				overflow: hidden;

				> image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				margin-left: 20rpx;
				flex: 1;
				overflow: hidden;
				min-height: 144rpx;
				position: relative;

				.one {
					width: 100%;
					overflow: hidden;

					.title {
						--limit-num: 1;
						margin-right: 10rpx;
						flex: 1;
						overflow: hidden;
					}
					.num {
						color: $old-price-color;
					}
				}

				.sign-bg {
					width: 100%;
					overflow: hidden;
					white-space: nowrap;

					.sign {
						display: inline-block;
						margin-right: 20rpx;
						color: $sub-title-color;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}

				.bottom {
					width: 100%;
					overflow: hidden;

					.time {
						height: 28rpx;
						line-height: 28rpx;
						text-align: center;
						border-radius: 4rpx;
						padding: 0rpx 6rpx;
						background: $time-grad-color;
						color: $time-title-color;
					}

					.price {
						margin-left: 10rpx;
						color: $price-color;
					}

					.old-price {
						margin-left: 12rpx;
						color: $old-price-color;
						text-decoration: line-through;
					}
				}

				.btn {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 140rpx;
					height: 52rpx;
					background-color: $theme-color;
					border-radius: 8rpx;
					overflow: hidden;
					line-height: 52rpx;
					text-align: center;
					color: $bg-text-color;
				}
			}
		}
	}
</style>
